import React, { Component } from 'react';
import { Button, Modal, Select, Form, Row, Col, Input, DatePicker, message } from 'antd';
import BaseComponent from '@/components/BaseComponent';
const { TextArea } = Input;
import { connect } from 'dva';
import moment from 'moment';
import ReportCard from '@/components/ReportCard';
import { njzdImgPrefixUrl } from '@/defaultSettings';
@connect(({ user }) => ({
  // data: risk.riskData,
  currentUser: user.currentUser,
}))
@Form.create()
export default class index extends BaseComponent {
  state = {
    visible: false,
    form: {},
    sgblCodeData: [],
    bmblCodeData: [],
    wblCodeData: [],
    sezcCodeData: [],
    blReportFilePath: undefined,
  };

  showModal = () => {
    this.findAllDictName();
    this.findById();
    this.setState({
      visible: true,
    });
  };

  handleOk = () => {
    this.props.form.validateFields((errors, values) => {
      if (!errors) {
        if (
          this.checkData(this.state.form.sgblCode) ||
          this.checkData(this.state.form.wblCode) ||
          this.checkData(this.state.form.bmblCode) ||
          this.checkData(this.state.form.sezcCode)
        ) {
          this.setState(
            params => ({
              form: {
                ...params.form,
                id: this.props.record.id,
                skip: '1',
                user: this.props.currentUser.id,
              },
            }),
            () => {
              this.updateRecord(this.state.form);
              this.setState({
                visible: false,
              });
            }
          );
        } else {
          message.error('至少选择一个病理诊断');
        }
      }
    });
  };

  checkData = code => {
    return !!code;
  };

  handleCancel = () => {
    this.setState({
      visible: false,
    });
  };

  handleUploadBefore = (file, fileList) => {
    this.setState({ isUploading: true }, () => {
      this.hide = this.loadingMessage('正在上传...');
    });
    return true;
  };
  handleBlUploadChange = ({ info }) => {
    if (info.file.status !== 'uploading') {
      this.setState(
        {
          fileList: info.fileList,
        },
        () => {}
      );
    }
    if (info.file.status === 'done') {
      const response = info.file.response;
      const {
        data: { filePath, originalFilename },
      } = response;
      const arr = filePath.split('/');
      // 文件前缀
      const prefix = arr[arr.length - 2];
      const url = `${prefix}/${originalFilename}`;

      this.setState(params => ({
        form: {
          ...params.form,
          blReportFilePath: filePath,
          blReportFileUrl: url,
        },
        isUploading: false,
      }));
      if (this.hide) {
        this.hide();
      }
      this.successMessage('上传成功');
    } else if (info.file.status === 'error') {
      this.errorMessage('文件上传出错,请联系管理员');
    }
  };
  handleDelBlImage = () => {
    this.setState(params => ({
      form: {
        ...params.form,
        blReportFilePath: '',
        blReportFileUrl: '',
      },
    }));
  };

  nameChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        name: value,
      },
    }));
  };
  sfzChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        sfz: value,
      },
    }));
  };

  idChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        id: value,
      },
    }));
  };

  phoneChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        phone: value,
      },
    }));
  };

  blNumChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        blNum: value,
      },
    }));
  };

  blbgTimeChange = (date, dateString) => {
    console.log(date, dateString);
    this.setState(params => ({
      form: {
        ...params.form,
        blbgTime: dateString,
      },
    }));
  };
  sgblCodeChange = value => {
    this.setState(params => ({
      form: {
        ...params.form,
        sgblCode: value,
      },
      selectedCount: value ? params.selectedCount + 1 : params.selectedCount - 1,
    }));
  };

  bmblCodeChange = value => {
    this.setState(params => ({
      form: {
        ...params.form,
        bmblCode: value,
      },
      selectedCount: value ? params.selectedCount + 1 : params.selectedCount - 1,
    }));
  };

  wblCodeChange = value => {
    this.setState(params => ({
      form: {
        ...params.form,
        wblCode: value,
      },
      selectedCount: value ? params.selectedCount + 1 : params.selectedCount - 1,
    }));
  };

  sezcCodeChange = value => {
    this.setState(params => ({
      form: {
        ...params.form,
        sezcCode: value,
      },
      selectedCount: value ? params.selectedCount + 1 : params.selectedCount - 1,
    }));
  };

  blzdStaffChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        blzdStaff: value,
      },
    }));
  };
  blshStaffChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        blshStaff: value,
      },
    }));
  };

  blzdChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        blzd: value,
      },
    }));
  };

  //字典
  findAllDictName = () => {
    this.execHttp('treatmentList/findAllDictName').then(resp => {
      if (resp && resp.success) {
        this.setState({
          sgblCodeData: resp.data.sgbl_code,
          bmblCodeData: resp.data.bmbl_code,
          wblCodeData: resp.data.wbl_code,
          sezcCodeData: resp.data.sezc_code,
        });
      }
    });
  };

  //保存
  updateRecord = from => {
    this.execHttp('crowdDataReport/updateRecord', {
      ...from,
    }).then(resp => {
      if (resp && resp.success) {
        message.success(resp.message);
        this.props.getDataByPage({});
      } else {
        message.error(resp.message);
      }
    });
  };

  /**详情*/
  findById = () => {
    this.execHttp('crowdDataReport/findById', {
      id: this.props.record.id,
    }).then(resp => {
      if (resp && resp.success) {
        this.setState({
          form: resp.data.response,
        });
      }
    });
  };

  render() {
    const { visible } = this.state;
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    };

    const { record } = this.props;
    const color = record.bl_report_file_url ? '#67c23a' : '#e6a23c';
    return (
      <div style={{ display: 'inline-block' }}>
        <Button
          type="primary"
          style={{ marginLeft: '10px', background: color, borderColor: color }}
          onClick={this.showModal}
        >
          病理
        </Button>
        <Modal
          title="病理查看"
          visible={visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          width={1500}
        >
          <Form {...formItemLayout}>
            <Row gutter={16}>
              <Col span={6}>
                <Form.Item label="姓名">
                  <Input
                    placeholder="姓名"
                    value={this.state.form.name}
                    disabled
                    onChange={this.nameChange}
                    style={{ width: 200 }}
                  />
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item label="身份证">
                  <Input
                    placeholder="身份证号码"
                    value={this.state.form.sfz}
                    disabled
                    onChange={this.sfzChange}
                    style={{ width: 200 }}
                  />
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item label="调查对象ID号">
                  <Input
                    placeholder="调查对象ID号"
                    value={this.state.form.screeningId}
                    disabled
                    onChange={this.idChange}
                    style={{ width: 200 }}
                  />
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item label="电话">
                  <Input
                    placeholder="电话"
                    value={this.state.form.phone}
                    disabled
                    onChange={this.phoneChange}
                    style={{ width: 200 }}
                  />
                </Form.Item>
              </Col>
            </Row>

            <Row gutter={16}>
              <Col span={6}>
                <Form.Item label="病理号">
                  {getFieldDecorator('blNum', {
                    initialValue: this.state.form.blNum,
                    rules: [{ required: true, message: '病理号不能为空' }],
                  })(
                    <Input
                      placeholder="病理号"
                      onChange={this.blNumChange}
                      style={{ width: 200 }}
                    />
                  )}
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item label="病理报告日期">
                  {getFieldDecorator('blbgTime', {
                    initialValue:
                      this.state.form.blbgTime === null
                        ? null
                        : moment(this.state.form.blbgTime, 'YYYY-MM-DD'),
                    rules: [{ required: true, message: '病理报告日期不能为空' }],
                  })(
                    <DatePicker
                      style={{ width: 200 }}
                      showTime
                      format="YYYY-MM-DD"
                      onChange={this.blbgTimeChange}
                    />
                  )}
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item label="食管最高病理诊断">
                  <Select
                    allowClear
                    value={this.state.form.sgblCode}
                    onChange={this.sgblCodeChange}
                    style={{ width: 200 }}
                    placeholder="请选择食管最高病理诊断代码"
                  >
                    {this.state.sgblCodeData.map(item => (
                      <Select.Option key={item.dictValue}>
                        {' '}
                        {'(' + item.dictValue + ')' + item.dictName}
                      </Select.Option>
                    ))}
                  </Select>
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item label="贲门最高病理诊断">
                  <Select
                    allowClear
                    value={this.state.form.bmblCode}
                    onChange={this.bmblCodeChange}
                    style={{ width: 200 }}
                    placeholder="请选择贲门最高病理诊断代码"
                  >
                    {this.state.bmblCodeData.map(item => (
                      <Select.Option key={item.dictValue}>
                        {' '}
                        {'(' + item.dictValue + ')' + item.dictName}
                      </Select.Option>
                    ))}
                  </Select>
                </Form.Item>
              </Col>
            </Row>

            <Row gutter={16}>
              <Col span={6}>
                <Form.Item label="胃最高病理诊断">
                  <Select
                    allowClear
                    value={this.state.form.wblCode}
                    onChange={this.wblCodeChange}
                    style={{ width: 200 }}
                    placeholder="请选择胃最高病理诊断代码"
                  >
                    {this.state.wblCodeData.map(item => (
                      <Select.Option key={item.dictValue}>
                        {'(' + item.dictValue + ')' + item.dictName}
                      </Select.Option>
                    ))}
                  </Select>
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item label="十二指肠最高病理诊断">
                  <Select
                    allowClear
                    value={this.state.form.sezcCode}
                    onChange={this.sezcCodeChange}
                    style={{ width: 200 }}
                    placeholder="请选择十二指肠最高病理诊断代码"
                  >
                    {this.state.sezcCodeData.map(item => (
                      <Select.Option key={item.dictValue}>
                        {' '}
                        {'(' + item.dictValue + ')' + item.dictName}
                      </Select.Option>
                    ))}
                  </Select>
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item label="病理诊断医师">
                  <Input
                    placeholder="病理诊断医师"
                    value={this.state.form.blzdStaff}
                    onChange={this.blzdStaffChange}
                    style={{ width: 200 }}
                  />
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item label="病理审核医师">
                  <Input
                    placeholder="病理审核医师"
                    value={this.state.form.blshStaff}
                    onChange={this.blshStaffChange}
                    style={{ width: 200 }}
                  />
                </Form.Item>
              </Col>
            </Row>

            <Row gutter={16}>
              <Col span={24}>
                <Form.Item label="病理诊断" labelCol={{ span: 2, offset: 0 }}>
                  <TextArea
                    rows={4}
                    placeholder="病理诊断"
                    value={this.state.form.blzd}
                    onChange={this.blzdChange}
                  />
                </Form.Item>
              </Col>
            </Row>

            <Row gutter={16}>
              <Col span={24}>
                <Form.Item labelCol={{ span: 2, offset: 0 }} label="病理">
                  <ReportCard
                    imagePreview={true}
                    emptyMsg={'暂无病理,请上传病理'}
                    uploadBtnLabel={'上传病理'}
                    fileUrl={this.state.form.blReportFileUrl}
                    isUploading={this.state.isUploading}
                    beforeUpload={this.handleUploadBefore}
                    onChange={this.handleBlUploadChange}
                    onDelClick={this.handleDelBlImage}
                  ></ReportCard>
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </Modal>
      </div>
    );
  }
}
